<script setup>
import ComSide from './components/ComSide.vue';
import ComHeader from './components/ComHeader.vue';
import ComFooter from './components/ComFooter.vue';
import ComMain from './components/ComMain.vue';
</script>

<template>





<!--
  <el-container>
    <el-aside width="200px">
      <ComSide></ComSide>
    </el-aside>
    <el-container>
      <el-header>
        <ComHeader></ComHeader>
      </el-header>
      <el-main>
        <ComMain></ComMain>

      </el-main>
      <el-footer>
        <ComFooter></ComFooter>
      </el-footer>
    </el-container>
  </el-container>-->
  <RouterView />


</template>

<style scoped>
.el-container {
  width: 100%;
  height: 100%;
}

.el-container .el-header {
  background-color: deepskyblue;

  color: var(--el-text-color-primary);
}

.el-container .el-footer {
  position: relative;
  text-align: center;

}

.el-container .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.el-container .el-menu {
  border-right: none;
}

.el-container .el-main {
  padding: 0;
}

.el-container .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 10px;
}

.content {
  flex: 1;
  /* background-color:antiquewhite; */
  display: flex;
  flex-direction: column;
}

.main {
  background-color: #f1f2f6;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;

}

.sub-nav {
  height: 50px;
  background-color: white;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.sub-nav span {
  color: #888;
  margin-right: 10px;
}

.sub-nav span a {
  color: #123456;
  text-decoration: none;
}

.main-body {
  flex: 1;
  margin: 0 10px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>